<template>
  <div class="demo-collapse">
    <el-button style="margin-bottom: 20px;" type="primary" plain icon="plus" @click="handleAddSchool">新建学校
    </el-button>
    <el-collapse v-model="activeName" accordion v-loading="loading">
      <el-collapse-item v-for="item in tableData" :title="item.xiaoming" :name="item.id">
        <div style="margin-bottom: 20px;">
          <el-button type="primary" link icon="plus" @click="handleDetail(item,'add')">新增项目</el-button>
          <el-button type="primary" link icon="edit" @click="handleAddSchool('edit',item)">修改学校</el-button>
          <el-button type="primary" link icon="delete" @click="handleDel(item.id,'school')">删除学校</el-button>
        </div>
        <tableList :table-data="item.project" :table-header="tableHeader" :table-options="tableOptions"
                   :table-height="'200px'"></tableList>
      </el-collapse-item>
    </el-collapse>
  </div>
  <Dialog :modelValue="visible" :title="schoolForm.id?'修改学校':'新建学校'" :maxHeight="'80px'"
          :width="mobile ? '90%' : '30%'"
          @handleClose="handleClose">
    <el-form :model="schoolForm" ref="schoolFormRef" :rules="schoolFormRules">
      <el-form-item label="学校名称" prop="xiaoming">
        <el-input v-model="schoolForm.xiaoming"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button type="primary" plain @click="handleSubmit" :loading="saveLoading">提交</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, nextTick} from 'vue'
import {projectDel, schoolDelete, schoolInsert, schoolList, schoolUpdate} from "@/api/school";
import {useRouter} from 'vue-router';
import tableList from '@/components/tableList/tableList.vue';
import {useDevice} from '@/hooks/web/useDevice';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Dialog} from '@/components/Dialog';

const router = useRouter()
let visible = ref(false)
const {mobile} = useDevice()
const activeName = ref('')
let loading = ref(false)
let saveLoading = ref(false)
const tableData = ref([
  {
    xiaoming: '',
    project: []
  }
])

const schoolFormRules = {
  xiaoming: [{required: true, message: '请输入学校名称', trigger: 'blur'}]
}

const schoolForm = reactive({
  xiaoming: '',
  id: '',
})

const schoolFormRef = ref('')
const tableHeader = reactive([
  {
    label: '项目名称', prop: 'name', type: 'btn', method: (row) => {
      handleDetail(row)
    }
  },
  {
    label: '报名费', prop: 'fee_type', type: 'html', code: (row) => {
      if (row.fee_type == 1) {
        return '<span style="color:#67C23A ">有报名费</span>'
      } else {
        return '<span style="color:#F56C6C;">无报名费</span>'
      }
    }
  },
  {label: '项目主管', prop: 'manager_user'},
  {label: '项目成员', prop: 'project_user'},
  {label: '微信通知账户', prop: 'wx_user'},
])

const tableOptions = reactive(
    {
      label: '操作',
      width: '200px',
      value: 1,
      options: [
        {
          label: '删除',
          icon: 'Delete',
          method: (row) => {
            handleDel(row.id,'')
          }
        },
      ]
    }
)

const handleDel = (id, type) => {
  ElMessageBox.confirm('确认要删除 ? 一旦删除无法恢复', '提示', {type: 'warning'}).then(async () => {
    let res = null
    if (type === 'school') {
      res = await schoolDelete({id: id})
    } else {
      res = await projectDel({id: id})
    }

    if (res) {
      ElMessage({message: '删除成功', type: 'success'})
      await fetchData()
    }
  }).catch(() => {

  })
}

/**
 * 提交保存
 */
const handleSubmit = () => {
  schoolFormRef.value.validate(async valid => {
    if (valid) {
      let res = ''
      console.log(schoolForm);
      saveLoading.value = true
      if (schoolForm.id) {
        res = await schoolUpdate(schoolForm)
      } else {
        res = await schoolInsert(schoolForm)
      }
      saveLoading.value = false
      if (res) {
        ElMessage({message: '保存成功', type: 'success'})
        handleClose();
        await fetchData()
      }
    }
  })
}

/**
 * 关闭弹框
 */
const handleClose = () => {
  schoolFormRef.value.resetFields();
  schoolForm.id = ''
  visible.value = false
}

/**
 * 新增项目和编辑项目
 * @param row
 */
const handleDetail = (row, type) => {
  if (type === 'add') {
    router.push({
      path: '/school-management/add-project',
      query: {'school_id': row.id, type: 'add', 'school_name': row.xiaoming}
    })
  } else {
    router.push({path: '/school-management/edit-project', query: {'id': row.id, type: 'edit'}})
  }
}

/**
 * 新增和编辑学校
 * @param type
 */
const handleAddSchool = (type, item) => {
  console.log(item);
  visible.value = true
  if (type === 'edit') {
    nextTick(() => {
      schoolForm.xiaoming = item.xiaoming
      schoolForm.id = item.id
    })

  }

}

const fetchData = async () => {
  loading.value = true
  let res = await schoolList();
  loading.value = false
  if (res) {
    tableData.value = res.data.list
    activeName.value = res.data.list[0].id
  }
}
onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="less">
/deep/ .el-collapse-item__header {
  padding: 0 10px !important;
}

/deep/ .el-collapse-item__content {
  padding: 0 10px !important;
}
</style>